<!-- 搜索框 -->
<template>
	<view class="search-top">
		<image src="../../static/search/菜单.png"></image>
		<view class="search" @click="toSeach">
			<input v-model="key" :style="{'text-align' : text_align }" :placeholder="SearchKey" confirm-type="search" />
		</view>
		<image v-if="path!=='pages/search/search' && path !== 'pages/search_list/search_list'"
			src="../../static/search/麦克风.png"></image>
		<image @click="toSearchList" v-else src="../../static/search/搜索.png"></image>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				path: '', // 当前的页面路径
				text_align: '', // 不同页面的输入框字体样式
			}
		},
		mounted() {
			this.getSearchKey()
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			this.path = page.route
			// 初始化输入框字体样式
			if (this.path !== 'pages/search/search' && this.path !== 'pages/search_list/search_list') {
				this.text_align = 'center'
			}
		},
		methods: {
			...mapActions('search', ['getSearchKey', 'GetSearchRecommend']),
			...mapMutations('search', ['setSearch']),
			// 跳转到搜索页面
			toSeach() {
				if (this.path === 'pages/search_list/search_list') {
					uni.redirectTo({
						url: '/pages/search/search',
					})
				}
				if (this.path !== 'pages/search/search') {
					uni.navigateTo({
						url: '/pages/search/search'
					})
				}
			},

			// 跳转到搜索结果页面
			toSearchList() {
				if (this.key.trim() && this.path === 'pages/search/search') {
					uni.redirectTo({
						url: '/pages/search_list/search_list'
					})
				}
			}
		},
		computed: {
			...mapState('search', ['SearchKey', 'search']),

			key: {
				get() {
					return this.search
				},
				set(v) {
					this.setSearch(v)
					if (v.trim()) {
						this.GetSearchRecommend(v)
					}
				}
			}
		},
	}
</script>

<style lang="scss">
	.search-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		width: 100%;
		margin-bottom: 20rpx;

		&>.search {
			width: 80%;
			background-color: #2f2d30;
			border-radius: 60rpx;

			&>input {
				font-size: 28rpx;
				height: 60rpx;
				color: #fff;
				padding: 0 40rpx;
			}
		}


		&>image {
			height: 50rpx;
			width: 50rpx;
		}
	}
</style>
